<template>
  <el-card class="sku-list">

    <el-table border style="width: 100%" :data=skuList>
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column prop="skuName" label="" width="名称" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column prop="date" label="默认图片">
        <template v-slot="{ row }">

          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />

        </template>

      </el-table-column>
      <el-table-column prop="weight" label="重量" width="180" />
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="address" label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" :icon="Top" v-if="row.isSale == 0" @click="onSale(row)"></el-button>
          <el-button type="success" :icon="Bottom" v-else @click="cancelSale(row)"></el-button>
          <el-button type="primary" :icon="Edit"></el-button>
          <el-button type="warning" :icon="View" @click="lookskuInfo(row)"></el-button>
          <el-button type="danger" :icon="Delete" @click="deleteSale(row)"></el-button>

        </template>

      </el-table-column>

    </el-table>
    <!-- 分页器 -->
    <!-- 分页器 -->
    <!-- 分页器 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 10, 15]"
      :small="small" :disabled="disabled" :background="background" layout=" prev, pager, next, jumper,->,sizes,total "
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 抽屉 -->
    <el-drawer v-model="table" title="sku列表" direction="rtl" size="50%">
   
        <el-row :gutter="10">

          <el-col :span="8">
         名称
          </el-col>
          <el-col :span="16">
            {{ skuInfo.skuName }}
          </el-col>
          <el-col :span="8">
          描述
          </el-col>
          <el-col :span="16">
            {{ skuInfo.skuDesc }}
          </el-col>
          <el-col :span="8">
            价格
          </el-col>
          <el-col :span="16">
            {{ skuInfo.price }}
          </el-col>
            <el-col :span="8">
              平台属性
            </el-col>
            <el-col :span="16">
              <el-tag class="ml-2" type="success" v-for="c1 in skuInfo.skuAttrValueList" :key="c1.id">{{ c1.attrName }}-{{ c1.valueName }}</el-tag>
            </el-col>
            <el-col :span="8">
              销手属性
            </el-col>
            <el-col :span="16">
              <el-tag class="ml-2" type="success" v-for="c2 in skuInfo.skuSaleAttrValueList" :key="c2.id">{{ c2.saleAttrName }}-{{
                c2.saleAttrValueName }}</el-tag>
            </el-col>


            <el-col :span="8">
              商品图片
            </el-col>
            <el-col :span="16">
            <el-carousel :interval="5000" arrow="always">
              <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
                  <el-image :src="item.imgUrl"  />
              </el-carousel-item>
            </el-carousel>
            </el-col>

        </el-row>





  
    </el-drawer>


  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sku'
}
</script>
<script lang="ts" setup>
import { reqGetAllSkuListData, reqCancelSale, reqOnSale, reqDeleteSkuInfo, reqGetOneSkuInfo } from "@/api/product/skuIndex"
import { ref, onMounted, reactive } from 'vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Top,
  Bottom,
  View
} from '@element-plus/icons-vue'
const currentPage = ref(1);
const pageSize = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref<number>(0);

const skuInfo = reactive({});

//存储数据
const skuList = ref([])

//控制抽屉
const table = ref(false);
// 1页面的数据量
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize.value = val
  currentPage.value = 1
  // 重新请求数据

  getskuList()
}
// 2改变当前的页码
const handleCurrentChange = (val: number) => {
  // 
  // console.log(`current page: ${val}`)
  currentPage.value = val;
  // 重新发送
  getskuList()


}
//3获取列表的数据
const getskuList = async () => {
  const res = await reqGetAllSkuListData(currentPage.value, pageSize.value)
  skuList.value = res.records;
  total.value = res.total;
}
onMounted(() => {
  getskuList()
})
//上架
const onSale = async (row) => {
  await reqOnSale(row.id)
  getskuList()
}
//下架
const cancelSale = async (row) => {
  await reqCancelSale(row.id);
  getskuList()
}

//删除一行数据
const deleteSale = async (row) => {
  await reqDeleteSkuInfo(row.id);
  getskuList()
}
//查看skuinfo 
const lookskuInfo = async(row) => {
  const res = await reqGetOneSkuInfo(row.id)
Object.assign(skuInfo,res)
  table.value = true;
}
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.sku-list {
  .el-row {
    font-size: 20px;
    // height:32px;
    margin-top: 8px;

    .el-col-6 {
      text-align: right;
    }

    .el-carousel__item {
      background-color: #fff;
      text-align: center;

      .el-image {
        height: 100%;
      }
    }
  }
}
</style>